{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .performance {
            width: 100%;height: 40px;line-height: 40px;padding-left: 10px;border-bottom: #999999 dashed 1px;cursor: pointer;
        }
        .performance_active {
            background: #2db7f5;color: white;border-bottom: #2db7f5 dashed 1px;
        }
        .file {
            position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 2px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        .sheet {
            width: 90px;height: 35px;border-top-right-radius: 5px;border-top-left-radius: 5px;border: #cfcfcf solid 1px;font-size: 12px;
        }
        .sheet:hover {
            background: #2db7f5;color: white;border: #2db7f5 solid 1px;
        }
        .sheet_active {
            background: #2db7f5;color: white;border: #2db7f5 solid 1px;
        }
        .merits {
            display: inline-block;vertical-align: top;width: 80px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;
        }
        .merits_active {
            display: inline-block;vertical-align: top;width: 80px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;color: #2db7f5;border-bottom: #2db7f5 solid 3px;
        }
        .personnel_allotment {
            width: 100%;height: 80%;border-bottom: #cfcfcf solid 1px;overflow: auto;
        }
        .personnel_allotment::-webkit-scrollbar {
          display: none;
        }
        .presentation {
            width: 100px;height: 35px;background: #00BFFF;border: #00BFFF solid 1px;border-radius: 3px;cursor: pointer;color: white;
        }
        .presentation:hover {
            background: #1C86EE;border: #1C86EE solid 1px;
        }
        .preserve {
            width: 100px;height: 35px;background: #6dbfff;border: #6dbfff solid 1px;border-radius: 3px;cursor: pointer;color: white;margin-left: 20px;
        }
        .preserve:hover {
            background: #1E90FF;border: #1E90FF solid 1px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 15%;height: 95%;margin-top: 1.25%;display: inline-block;vertical-align: top;background: white;border: #cfcfcf solid 1px;margin-left: 1%;">
        <div onclick="window.location.href='/supervision-inspection/performance_management.html'" class="performance">
            绩效分配
        </div>
        <div onclick="window.location.href='/supervision-inspection/supervise_completed.html'" class="performance">
            绩效汇总
        </div>
        <div onclick="window.location.href='/supervision-inspection/department_performance.html'" class="performance performance_active" {% if share_flag == 'true' %}style="color: red;"{% endif %}>
            科室绩效
        </div>
        <div onclick="choose_performance_type(this, 4)" class="performance">
            我的绩效
        </div>
    </div>

    <div style="width: 82%;height: 95%;margin-top: 1.25%;display: inline-block;vertical-align: top;background: white;border: #cfcfcf solid 1px;margin-left: 0.5%;">
        <div style="width: 100%;height: 100%;" id="performance_allocation">
            {% if purview_flag == 'true' %}
                <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;">
                    <div style="display: inline-block;vertical-align: top;">
                        <div id="total_performance" class="merits merits_active" onclick="change_performance_choose(this.id)">总绩效</div>
                        <div id="performance-allocation" class="merits" onclick="change_performance_choose(this.id)">绩效分配</div>
                    </div>
                    <div style="float: right;margin-right: 15px;display: inline-block;vertical-align: top;">
                        <div style="display: inline-block;vertical-align: top;width: 200px;height: 40px;padding-top: 5px;">
                            <select name="" id="month" style="width: 100%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;outline: none;" class="dept_select">
                                <option value="0">请选择年份</option>
                                {% for year in year_list %}
                                    <option value="{{ year }}">{{ year }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div style="display: inline-block;vertical-align: top;width: 200px;height: 40px;padding-top: 5px;">
                            <select name="dept" style="width: 100%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;outline: none;" id="dept" class="dept_select">
                                <option value="0">请选择月份</option>
                                {% for month in month_list %}
                                    <option value="{{ month }}">{{ month }}</option>
                                {% endfor %}
                            </select>
                        </div>

    {#                    <input type="text" style="width: 300px;height: 30px;margin-top: 5px;border: #2db7f5 solid 1px;border-top-left-radius: 3px;border-bottom-left-radius: 3px;margin-right: -4.5px;">#}
                        <button style="width: 100px;height: 30px;margin-top: 5px;letter-spacing: 5px;background: #2db7f5;border: #2db7f5 solid 1px;color: white;">搜索</button>
                    </div>
                </div>
                <div id="total_performance_detail" style="width: 100%;height: 95%;">
                    <div id="table_detail" style="width: 100%;height: 95%;overflow-x: auto;">
                        <table id="main_table" style="width: 1950px;">
                            <tr style="border-bottom: #cfcfcf solid 1px;">
                                <td colspan="16" style="width: 1850px;height: 40px;line-height: 40px;text-align: center;"><strong style="font-size: 18px;">{{ search_year }}年{{ search_month }}月绩效工资分配表</strong></td>
                                <td style="width: 100px;height: 40px;line-height: 40px;text-align: center;border-left: #cfcfcf solid 1px;"><strong style="font-size: 18px;">正01表</strong></td>
                            </tr>
                            <tr style="border-bottom: #cfcfcf solid 1px;">
                                <td colspan="17" style="width: 1950px;height: 30px;line-height: 30px;text-align: left;padding-left: 15px;font-size: 12px;">单位：协和京山医院</td>
                            </tr>
                            <tr style="border-bottom: #cfcfcf solid 1px;">
                                <td rowspan="2" style="width: 200px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">科室</td>
                                <td rowspan="2" style="width: 200px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">科室编号</td>
                                <td rowspan="2" style="width: 100px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">科室负责人</td>
                                <td rowspan="2" style="width: 100px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">工号</td>
                                <td colspan="2" style="width: 200px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;font-size: 12px;">科室绩效</td>
                                <td rowspan="2" style="width: 100px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">科室绩效合计</td>
                                <td rowspan="2" style="width: 100px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">科主任科室绩效</td>
                                <td colspan="7" style="width: 750px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;font-size: 12px;">专项绩效</td>
                                <td rowspan="2" style="width: 100px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">专项绩效合计</td>
                                <td rowspan="2" style="width: 100px;height: 60px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 60px;font-size: 12px;">应发绩效总计</td>
                            </tr>
                            <tr style="border-bottom: #cfcfcf solid 1px;">
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">工作量绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">综合考核绩效</td>
                                <td style="width: 150px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">科主任管理绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">夜班绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">会诊绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">门诊专项绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">医共体绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">其他单项绩效</td>
                                <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">人才储备绩效</td>
                            </tr>
                            {% for items in current_obj %}
                                <tr style="border-bottom: #cfcfcf solid 1px;">
                                    <td style="width: 200px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.department_name }}</td>
                                    <td style="width: 200px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.department_code }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.department_director }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.job_number }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.workload }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.synthesize }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.department_total }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.director_performance }}</td>
                                    <td style="width: 150px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.director_control_performance }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.night_shift_performance }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.consultation_performance }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.outpatient_special_performance }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.medical_community }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.other_single }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.talent_reserve }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.special_performance }}</td>
                                    <td style="width: 100px;height: 30px;text-align: center;border-right: #cfcfcf solid 1px;line-height: 30px;">{{ items.expected_performance }}</td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                    <div style="width: 100%;height: 40px;padding-left: 5px;overflow-y: auto;margin-top: 5px;">
                        <button onclick="choose_sheet(this, 'a')" class="sheet sheet_active">绩效主表</button>
                        <button onclick="choose_sheet(this, 'b')" class="sheet">临床科室</button>
                        <button onclick="choose_sheet(this, 'c')" class="sheet">人才储备绩效</button>
                        <button onclick="choose_sheet(this, 'd')" class="sheet">其他单项</button>
                        <button onclick="choose_sheet(this, 'e')" class="sheet">医共体专项</button>
                        <button onclick="choose_sheet(this, 'f')" class="sheet">门诊专项绩效</button>
                        <button onclick="choose_sheet(this, 'g')" class="sheet">会诊绩效</button>
                        <button onclick="choose_sheet(this, 'h')" class="sheet">夜班绩效</button>
                        <button onclick="choose_sheet(this, 'i')" class="sheet" style="width: 120px;">科主任管理绩效 </button>
                        <button onclick="choose_sheet(this, 'j')" class="sheet" style="width: 140px;">综合目标绩效(临床)</button>
                        <button onclick="choose_sheet(this, 'k')" class="sheet" style="width: 140px;">综合目标绩效(医技)</button>
                        <button onclick="choose_sheet(this, 'l')" class="sheet" style="width: 140px;">新入职人才储备绩效</button>
                    </div>
                </div>
                <div id="performance-allocation-detail" style="width: 100%;height: 95%;display: none;">
                    <div style="width: 100%;height: 100%;overflow-x: auto;">
                        <div style="width: 100%;height: 105px;">
                            <table style="width: 100%;">
                                <tr style="width: 100%;border-bottom: #cfcfcf solid 1px;">
                                    <td colspan="13" style="width: 100%;height: 35px;text-align: center;">
                                        <strong style="font-size: 18px;">{{ search_year }}年{{ search_month }}月绩效工资分配表</strong>
                                    </td>
                                </tr>
                                <tr style="width: 100%;border-bottom: #cfcfcf solid 1px;">
                                    <td colspan="13" style="width: 100%;height: 35px;padding-left: 10px;">
                                        单位：协和京山医院
                                    </td>
                                </tr>
                                <tr style="width: 100%;border-bottom: #cfcfcf solid 1px;">
                                    <td style="width: 4%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">序号</td>
                                    <td style="width: 7%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">科室编号</td>
                                    <td style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">科室</td>
                                    <td style="width: 5%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">职务</td>
                                    <td style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">医生/护士</td>
                                    <td style="width: 5%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">工号</td>
                                    <td style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">姓名</td>
                                    <td style="width: 15%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">银行账号</td>
                                    <td style="width: 9%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">工作量绩效</td>
                                    <td style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">夜班绩效</td>
                                    <td style="width: 9%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">医共体绩效</td>
                                    <td style="width: 9%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">绩效工资合计</td>
                                    <td style="width: 5%;height: 35px;text-align: center;">操作</td>
                                </tr>
                            </table>
                        </div>
                        <div class="personnel_allotment" {% if share_flag == 'false' %}style="height: 86%;"{% endif %}>
                            <table id="summit_table" style="width: 100%;">
                                {% for staff in office_staff %}
                                    <tr id="rol-{{ staff.id }}" style="width: 100%;border-bottom: #cfcfcf solid 1px;">
                                        <td style="width: 4%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.serial }}</td>
                                        <td class="code-class" style="width: 7%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.department_code }}</td>
                                        <td class="company-class" style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.company }}</td>
                                        <td class="duties-class" style="width: 5%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.duties }}</td>
                                        <td class="identity-class" style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.identity }}</td>
                                        <td class="job-num-class" style="width: 5%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.job_number }}</td>
                                        <td class="real-name-class" style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.real_name }}</td>
                                        <td class="account-class" style="width: 15%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.bank_account }}</td>
                                        <td class="workload-class" style="width: 9%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.workload }}</td>
                                        <td class="night-class" style="width: 8%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.night_shift_performance }}</td>
                                        <td class="medical-class" style="width: 9%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.medical_community }}</td>
                                        <td class="amount-class" style="width: 9%;height: 35px;text-align: center;border-right: #cfcfcf solid 1px;">{{ staff.total_salary }}</td>
                                        {% if staff.flag == 'true' %}
                                            <td style="width: 5%;height: 35px;text-align: center;color: #2db7f5;cursor: pointer;" onclick="upload_performance(this, '{{ staff.id }}')">编辑</td>
                                        {% else %}
                                            <td style="width: 5%;height: 35px;text-align: center;color: #cfcfcf;cursor: pointer;">编辑</td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </table>
                        </div>
                        {% if share_flag == 'true' %}
                            <div style="width: 100%;height: 40px;text-align: center;margin-top: 5px;padding-top: 5px;">
                                <button onclick="summit_button('summit')" class="presentation">提&nbsp;&nbsp;&nbsp;交</button>
                                <button onclick="summit_button('save')" class="preserve">保&nbsp;&nbsp;&nbsp;存</button>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div style="width: 30%;height: 30%;margin-top: 18%;margin-left: 30%;text-align: center;">
                    <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                    <p style="color: #cfcfcf;">暂无数据</p>
                </div>
            {% endif %}
        </div>

        <div style="width: 100%;height: 100%;overflow: auto;display: none;" id="performance_statistics"></div>
        <div style="width: 100%;height: 100%;overflow: auto;display: none;" id="department_performance">

        </div>
        <div style="width: 100%;height: 100%;overflow: auto;display: none;" id="my_performance">
            <div style="width: 30%;height: 30%;margin-top: 18%;margin-left: 30%;text-align: center;">
                <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                <p style="color: #cfcfcf;">该功能暂未开放</p>
            </div>
        </div>
    </div>

    <div id="upload_meeting_minutes" class="shade">
        <div id="meeting_minutes" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 1000px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #F5F5F5 solid 1px;">
                <div id="minutes" style="width: 100%;height: 40px;background: white;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h6 class="modal-title" style="line-height: 40px;width: 35%;margin-left: 1%;display: inline-block;">绩效分配</h6>
                    <span onclick="close_models()" style="float: right;line-height: 40px;padding-right: 2%;cursor: pointer;"><i class="iconfont icon-quchu"></i></span>
                </div>

                <div style="width: 100%;padding-bottom: 10px;">
                    <div style="width: 98%;height: 130px;margin-top: 10px;margin-left: 1%;background: white;border-radius: 3px;padding-left: 1%;">
                        <div style="height: 50px;margin-top: 10px;line-height: 50px;">
                            绩效总额：
                        </div>
                        <div style="height: 50px;margin-top: 10px;">
                            <div style="height: 50px;line-height: 50px;display: inline-block;vertical-align: top;">工作量绩效：<span id="workload-wages" style="color: #0d8ddb;"></span> 元</div>
                            <div style="height: 50px;line-height: 50px;display: inline-block;vertical-align: top;margin-left: 30px;">夜班绩效：<span id="night-wages" style="color: #0d8ddb;"></span> 元</div>
                            <div style="height: 50px;line-height: 50px;display: inline-block;vertical-align: top;margin-left: 30px;">医共体绩效：<span id="medical-wages" style="color: #0d8ddb;"></span> 元</div>
                        </div>
                    </div>
                    <div style="width: 98%;margin-top: 10px;margin-left: 1%;background: white;border-radius: 3px;">
                        <div style="width: 100%;height: 50px;">
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;">
                                <div style="display: inline-block;width: 105px;text-align-last: justify;">姓名</div><span>：</span>
                                <input id="real-name" type="text" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;" disabled>
                            </div>
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;margin-left: 15px;">
                                <div style="display: inline-block;width: 80px;text-align-last: justify;">工号</div><span>：</span>
                                <input id="job-number" type="text" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;" disabled>
                            </div>
                        </div>

                        <div style="width: 100%;height: 50px;">
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;">
                                <div style="display: inline-block;width: 105px;text-align-last: justify;">科室</div><span>：</span>
                                <input id="company-name" type="text" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;" disabled>
                            </div>
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;margin-left: 15px;">
                                <div style="display: inline-block;width: 80px;text-align-last: justify;">科室编号</div><span>：</span>
                                <input id="company-code" type="text" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;" disabled>
                            </div>
                        </div>

                        <div style="width: 100%;height: 50px;">
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;">
                                <div style="display: inline-block;width: 105px;text-align-last: justify;">职务</div><span>：</span>
                                <input id="duties-name" type="text" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;">
                            </div>
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;margin-left: 15px;">
                                <div style="display: inline-block;width: 80px;text-align-last: justify;">医生/护士</div><span>：</span>
                                <input id="identity-name" type="text" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;">
                            </div>
                        </div>

                        <div style="width: 100%;height: 50px;">
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;">
                                <div style="display: inline-block;width: 105px;text-align-last: justify;">银行账号</div><span>：</span>
                                <input id="bank-account" type="number" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;">
                            </div>
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;margin-left: 15px;">
                                <div style="display: inline-block;width: 80px;text-align-last: justify;">工作量绩效</div><span>：</span>
                                <input id="workload-performance" type="number" onblur="AllPerformance(1)" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;">
                            </div>
                        </div>

                        <div style="width: 100%;height: 50px;">
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;">
                                <div style="display: inline-block;width: 105px;text-align-last: justify;">夜班绩效</div><span>：</span>
                                <input id="night-performance" type="number" onblur="AllPerformance(2)" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;">
                            </div>
                            <div style="height: 50px;padding-top: 7px;padding-left: 10px;display: inline-block;vertical-align: top;margin-left: 15px;">
                                <div style="display: inline-block;width: 80px;text-align-last: justify;">医共体绩效</div><span>：</span>
                                <input id="medical-performance" type="number" onblur="AllPerformance(3)" style="width: 345px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;" >
                            </div>
                        </div>

                        <div style="width: 100%;height: 50px;padding-top: 7px;padding-left: 10px;">
                            <div style="display: inline-block;width: 105px;text-align-last: justify;">绩效工资合计</div><span>：</span>
                            <input id="total-performance" type="text" style="width: 820px;border: #cfcfcf solid 1px;border-radius: 3px;padding-left: 1%;display: inline-block;" disabled>
                        </div>
                    </div>
                </div>

                <div style="width: 100%;height: 40px;text-align: right;padding-right: 2%;background: white;">
                    <button id="SubmitSummary" onclick="save_data()" style="width: 100px;height: 30px;border: #dfdfdf solid 1px;border-radius: 3px;background: #1E90FF;color: white;margin-top: 5px;">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/personnel/js/jquery.searchableSelect.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("supervision_inspection_management").className = "add-nav-active";
        };

        function choose_performance_type(ele, type_number) {
            var performance_obj = document.getElementsByClassName("performance");
            for (var i=0; i<performance_obj.length; i++) {
                performance_obj[i].className = "performance";
            }
            ele.className = "performance performance_active";

            if (type_number === 1) {
                document.getElementById("performance_allocation").style.display = "block";
                document.getElementById("performance_statistics").style.display = "none";
                document.getElementById("department_performance").style.display = "none";
                document.getElementById("my_performance").style.display = "none";
            }else if (type_number === 2) {
                document.getElementById("performance_statistics").style.display = "block";
                document.getElementById("performance_allocation").style.display = "none";
                document.getElementById("department_performance").style.display = "none";
                document.getElementById("my_performance").style.display = "none";
            }else if (type_number === 3) {
                document.getElementById("department_performance").style.display = "block";
                document.getElementById("performance_allocation").style.display = "none";
                document.getElementById("performance_statistics").style.display = "none";
                document.getElementById("my_performance").style.display = "none";
            }else {
                document.getElementById("my_performance").style.display = "block";
                document.getElementById("performance_allocation").style.display = "none";
                document.getElementById("performance_statistics").style.display = "none";
                document.getElementById("department_performance").style.display = "none";
            }
        }

        let minutes = document.querySelector("#minutes");
        let meeting_minutes = document.querySelector("#meeting_minutes");

        minutes.addEventListener("mousedown", function (e) {
            let x = e.pageX - meeting_minutes.offsetLeft;
            let y = e.pageY - meeting_minutes.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                meeting_minutes.style.left = e.pageX - x + 'px';
                meeting_minutes.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function upload_performance(ele_obj, ele_id) {
            var workload_money = '{{ workload_money | safe }}';
            var night_shift_performance_money = '{{ night_shift_performance_money | safe }}';
            var medical_community_money = '{{ medical_community_money | safe }}';
            var workload_all = 0;var night_all = 0;var medical_all = 0;
            var workload_class_list = document.getElementsByClassName('workload-class');
            for (var workload=0; workload<workload_class_list.length; workload++) {
                if (workload_class_list[workload].innerHTML) {
                    workload_all += parseFloat(workload_class_list[workload].innerHTML)
                }
            }
            document.getElementById('workload-wages').innerText = (parseFloat(workload_money) - workload_all).toFixed(2);

            var night_class_list = document.getElementsByClassName('night-class');
            for (var night=0; night<night_class_list.length; night++) {
                if (night_class_list[night].innerHTML) {
                    night_all += parseFloat(night_class_list[night].innerHTML)
                }
            }
            document.getElementById('night-wages').innerText = (parseFloat(night_shift_performance_money) - night_all).toFixed(2);

            var medical_class_list = document.getElementsByClassName('medical-class');
            for (var medical=0; medical<medical_class_list.length; medical++) {
                if (medical_class_list[medical].innerHTML) {
                    medical_all += parseFloat(medical_class_list[medical].innerHTML)
                }
            }
            document.getElementById('medical-wages').innerText = (parseFloat(medical_community_money) - medical_all).toFixed(2);

            var children_node = ele_obj.parentNode.children
            document.getElementById('company-code').value = children_node[1].innerText
            document.getElementById('company-name').value = children_node[2].innerText
            document.getElementById('duties-name').value = children_node[3].innerText
            document.getElementById('identity-name').value = children_node[4].innerText
            document.getElementById('job-number').value = children_node[5].innerText
            document.getElementById('real-name').value = children_node[6].innerText
            document.getElementById('bank-account').value = children_node[7].innerText
            document.getElementById('workload-performance').value = children_node[8].innerText
            document.getElementById('night-performance').value = children_node[9].innerText
            document.getElementById('medical-performance').value = children_node[10].innerText
            document.getElementById('total-performance').value = children_node[11].innerText
            document.getElementById("SubmitSummary").setAttribute("onclick", 'save_data('+ele_id+')')
            document.getElementById("upload_meeting_minutes").style.display = "table-row";
        }

        function save_data(ele_id) {
            var children_node = document.getElementById('rol-'+ele_id).children
            children_node[1].innerText = document.getElementById('company-code').value;
            children_node[2].innerText = document.getElementById('company-name').value;
            children_node[3].innerText = document.getElementById('duties-name').value;
            children_node[4].innerText = document.getElementById('identity-name').value;
            children_node[5].innerText = document.getElementById('job-number').value;
            children_node[6].innerText = document.getElementById('real-name').value;
            children_node[7].innerText = document.getElementById('bank-account').value;
            children_node[8].innerText = document.getElementById('workload-performance').value;
            children_node[9].innerText = document.getElementById('night-performance').value;
            children_node[10].innerText = document.getElementById('medical-performance').value;
            children_node[11].innerText = document.getElementById('total-performance').value;
            close_models();
        }

        function close_models() {
            document.getElementById("upload_meeting_minutes").style.display = "none";
        }

        function choose_sheet(eve_this, data_type) {
            var sheet_list = document.getElementsByClassName("sheet");
            for (var i=0; i<sheet_list.length; i++) {
                sheet_list[i].className = "sheet"
            }
            eve_this.className = "sheet sheet_active";
            switch_tables(data_type);
        }

        $(function(){
            $('select').searchableSelect();
        });
        
        function switch_tables(data_type) {
            document.getElementById("loading").style.display = "inline-block";
            var form = new FormData();
            form.append("search_year", '{{ search_year }}');
            form.append("search_month", '{{ search_month }}');
            form.append("department_code", '{{ department_code }}')
            form.append("data_type", data_type);
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/supervision-inspection/switch_tables", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate['code'] === 200) {
                            document.getElementById("main_table").innerHTML = "";
                            $("#main_table").append(JsonDate['data'])
                        }else {
                            alert(JsonDate['message'])
                        }
                    }
                }
             };
        }

        function change_performance_choose(ele_id) {
            if (ele_id === 'total_performance') {
                document.getElementById('total_performance').className = "merits merits_active";
                document.getElementById('performance-allocation').className = "merits";
                document.getElementById('total_performance_detail').style.display = "block";
                document.getElementById('performance-allocation-detail').style.display = "none";
            }else {
                document.getElementById('total_performance').className = "merits";
                document.getElementById('performance-allocation').className = "merits merits_active";
                document.getElementById('total_performance_detail').style.display = "none";
                document.getElementById('performance-allocation-detail').style.display = "block";
            }
        }

        function AllPerformance(ele_obj) {
            if (ele_obj === 1) {
                document.getElementById('workload-performance').value = parseFloat(document.getElementById('workload-performance').value).toFixed(2)
            }else if (ele_obj === 2) {
                document.getElementById('night-performance').value = parseFloat(document.getElementById('night-performance').value).toFixed(2)
            }else {
                document.getElementById('medical-performance').value = parseFloat(document.getElementById('medical-performance').value).toFixed(2)
            }
            var workload = document.getElementById('workload-performance').value;
            var night = document.getElementById('night-performance').value;
            var medical = document.getElementById('medical-performance').value;

            if (!workload) {
                workload = 0
            }
            if (!night) {
                night = 0
            }
            if (!medical) {
                medical = 0
            }
            var total_money = parseFloat(workload) + parseFloat(night) + parseFloat(medical)
            console.log(total_money)
            document.getElementById('total-performance').value = parseFloat(total_money).toFixed(2)
        }
        
        function summit_button(summit_type) {
            if (summit_type === 'summit') {
                var workload_money = '{{ workload_money | safe }}';
                var night_shift_performance_money = '{{ night_shift_performance_money | safe }}';
                var medical_community_money = '{{ medical_community_money | safe }}';

                var workload_all = 0;var night_all = 0;var medical_all = 0;
                var workload_class_list = document.getElementsByClassName('workload-class');
                for (var workload=0; workload<workload_class_list.length; workload++) {
                    if (workload_class_list[workload].innerHTML) {
                        workload_all += parseFloat(workload_class_list[workload].innerHTML)
                    }
                }
                if (parseFloat(workload_money).toFixed(2) !== workload_all.toFixed(2)) {
                    alert('工作量绩效分配存在问题，请检查后重新提交！')
                    return false
                }

                var night_class_list = document.getElementsByClassName('night-class');
                for (var night=0; night<night_class_list.length; night++) {
                    if (night_class_list[night].innerHTML) {
                        night_all += parseFloat(night_class_list[night].innerHTML)
                    }
                }
                if (parseFloat(night_shift_performance_money).toFixed(2) !== night_all.toFixed(2)) {
                    alert('夜班绩效分配存在问题，请检查后重新提交！')
                    return false
                }

                var medical_class_list = document.getElementsByClassName('medical-class');
                for (var medical=0; medical<medical_class_list.length; medical++) {
                    if (medical_class_list[medical].innerHTML) {
                        medical_all += parseFloat(medical_class_list[medical].innerHTML)
                    }
                }
                if (parseFloat(medical_community_money).toFixed(2) - medical_all.toFixed(2)) {
                    alert('医共体绩效分配存在问题，请检查后重新提交！')
                    return false
                }
            }

            var SummitTable = document.getElementById("summit_table");
            var TrArray = SummitTable.getElementsByTagName("tr");
            var TableArrayList = [];
            for (var tr_tag=0; tr_tag<TrArray.length; tr_tag++) {
                var TdArray = TrArray[tr_tag].getElementsByTagName("td");
                var td_list = [];
                for (var td_tag=1; td_tag<TdArray.length-1; td_tag++) {
                    if (!TdArray[td_tag].innerText && summit_type === 'summit') {
                        alert('绩效分配存在未填写问题，请检查后重新提交！')
                        return false
                    }
                    td_list.push(TdArray[td_tag].innerText)
                }
                TableArrayList.push(td_list);
            }
            document.getElementById("loading").style.display = "inline-block";
            var form = new FormData();
            form.append("TableArrayList", JSON.stringify(TableArrayList))
            form.append("summit_type", summit_type)
            form.append("search_year", '{{ search_year }}')
            form.append("search_month", '{{ search_month }}')
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/supervision-inspection/performance_data_save", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200) {
                            window.location.reload();
                            alert("操作成功！")
                        }else {
                            alert("操作失败！")
                        }
                    }
                }
            };
        }
    </script>
{% endblock %}
